<template>
    <!-- 添加顶部菜单 -->
  <topNar/>
  <div class="news-page">
    <div class="header">
      <h1>新闻中心</h1>
      <div class="header-actions">
        <button @click="refreshNews" :disabled="loading" class="refresh-btn">
          <i class="el-icon-refresh"></i>
          {{ loading ? '加载中...' : '刷新' }}
        </button>
        <div class="search-box">
          <i class="el-icon-search"></i>
          <input 
            v-model="searchTerm" 
            type="text" 
            placeholder="搜索新闻..." 
            class="search-input"
          />
        </div>
      </div>
    </div>

    <div class="content">
      <div class="news-list">
        <div v-if="loading" class="loading">
          <div class="loading-spinner"></div>
          <p>正在加载新闻...</p>
        </div>
        
        <div v-else-if="error" class="error">
          <i class="el-icon-warning"></i>
          <p>{{ error }}</p>
          <button @click="refreshNews">重新加载</button>
        </div>
        
        <div v-else>
          <div 
            v-for="news in filteredNews" 
            :key="news.newsId"
            @click="selectedNews = news"
            class="news-item"
            :class="{ active: selectedNews && selectedNews.newsId === news.newsId }"
          >
            <div class="news-image">
              <img 
                :src="news.newsImg || defaultImage" 
                :alt="news.newsTitle"
                @error="handleImageError($event)"
              />
              <div class="news-date-badge">
                <span class="day">{{ formatDay(news.newsTime) }}</span>
                <span class="month">{{ formatMonth(news.newsTime) }}</span>
              </div>
            </div>
            <div class="news-content">
              <h3>{{ news.newsTitle }}</h3>
              <p>{{ news.newsAbstract }}</p>
              <div class="news-meta">
                <span class="author" v-if="news.createBy">
                  <i class="el-icon-user"></i> {{ news.createBy }}
                </span>
                <span class="category">
                  <i class="el-icon-collection-tag"></i> 校园新闻
                </span>
              </div>
            </div>
          </div>
          
          <div v-if="filteredNews.length === 0" class="no-data">
            <i class="el-icon-document"></i>
            <p>暂无新闻数据</p>
          </div>
        </div>
      </div>

      <div class="news-detail">
        <div v-if="selectedNews" class="detail-content">
          <div class="detail-header">
            <h2>{{ selectedNews.newsTitle }}</h2>
            <div class="detail-meta">
              <span><i class="el-icon-time"></i> {{ formatDate(selectedNews.newsTime) }}</span>
              <span v-if="selectedNews.createBy"><i class="el-icon-user"></i> {{ selectedNews.createBy }}</span>
            </div>
          </div>
          
          <div class="detail-image" v-if="selectedNews.newsImg">
            <img 
              :src="selectedNews.newsImg" 
              :alt="selectedNews.newsTitle"
              @error="handleImageError($event)"
            />
          </div>
          
          <div class="detail-text" v-html="selectedNews.newsContent || selectedNews.newsAbstract"></div>
          
          <div class="detail-footer">
            <div class="detail-info">
              <p v-if="selectedNews.updateTime">
                <i class="el-icon-edit"></i> 更新时间：{{ formatDate(selectedNews.updateTime) }}
              </p>
              <p v-if="selectedNews.remark">
                <i class="el-icon-info"></i> 备注：{{ selectedNews.remark }}
              </p>
            </div>
            
            <div class="detail-actions">
              <button class="action-btn">
                <i class="el-icon-share"></i> 分享
              </button>
              <button class="action-btn">
                <i class="el-icon-star-off"></i> 收藏
              </button>
            </div>
          </div>
        </div>
        <div v-else class="no-selection">
          <i class="el-icon-reading"></i>
          <p>点击左侧新闻查看详情</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import topNar from "./compoents/topNar.vue";
import { listNewsInfo } from "@/api/newsInfo/newsInfo";

export default {
  name: 'NewsPage',
  components: {
    topNar
  },
  data() {
    return {
      newsData: {
        total: 0,
        code: 200,
        msg: '',
        rows: []
      },
      selectedNews: null,
      searchTerm: '',
      loading: false,
      error: null,
      defaultImage: ''
    }
  },
  
  computed: {
    filteredNews() {
      if (!this.searchTerm) {
        return this.newsData.rows
      }
      return this.newsData.rows.filter(news => 
        news.newsTitle.includes(this.searchTerm) ||
        news.newsAbstract.includes(this.searchTerm)
      )
    }
  },
  
  methods: {
    async getNewsList(params = {}) {
      try {
        this.loading = true
        this.error = null
        
        const response = await listNewsInfo(params)
        
        if (response.code === 200) {
          this.newsData = response
        } else {
          this.error = response.msg || '查询失败'
        }
      } catch (err) {
        this.error = '网络请求失败'
        console.error(err)
      } finally {
        this.loading = false
      }
    },
    
    refreshNews() {
      this.getNewsList()
    },
    
    formatDate(dateString) {
      if (!dateString) return ''
      const date = new Date(dateString)
      return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
    },
    
    formatDay(dateString) {
      if (!dateString) return ''
      return new Date(dateString).getDate()
    },
    
    formatMonth(dateString) {
      if (!dateString) return ''
      const months = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
      return months[new Date(dateString).getMonth()]
    },
    
    handleImageError(event) {
      event.target.src = this.defaultImage
    }
  },
  
  mounted() {
    this.getNewsList()
  }
}
</script>

<style scoped>
.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 20px;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.logo-container {
  display: flex;
  align-items: center;
}

.logo {
  height: 32px;
  margin-right: 12px;
}

.system-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.nav-menu {
  border-bottom: none;
}

.user-info {
  display: flex;
  align-items: center;
}

.user-dropdown {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.username {
  margin: 0 8px;
  font-size: 14px;
  color: #333;
}
.pagination-wrapper {
  margin-top: 32px;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.news-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: #f8f9fa;
  min-height: calc(100vh - 60px);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e9ecef;
}

.header h1 {
  margin: 0;
  color: #2c3e50;
  font-size: 28px;
  font-weight: 600;
  position: relative;
  padding-left: 15px;
}

.header h1:before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 28px;
  background: linear-gradient(135deg, #3498db, #2c3e50);
  border-radius: 3px;
}

.header-actions {
  display: flex;
  gap: 20px;
  align-items: center;
}

.refresh-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(52, 152, 219, 0.3);
}

.refresh-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(52, 152, 219, 0.4);
}

.refresh-btn:disabled {
  background: #bdc3c7;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.search-box i {
  position: absolute;
  left: 12px;
  color: #7f8c8d;
}

.search-input {
  padding: 10px 15px 10px 40px;
  border: 1px solid #ddd;
  border-radius: 25px;
  width: 250px;
  font-size: 14px;
  transition: all 0.3s ease;
  background-color: white;
}

.search-input:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
  width: 300px;
}

.content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 30px;
}

.loading, .error, .no-data {
  text-align: center;
  padding: 60px 20px;
  color: #7f8c8d;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 15px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.error i, .no-data i {
  font-size: 48px;
  margin-bottom: 15px;
  color: #e74c3c;
}

.no-data i {
  color: #95a5a6;
}

.error button {
  margin-top: 15px;
  padding: 10px 20px;
  background: #e74c3c;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
}

.error button:hover {
  background: #c0392b;
}

.news-item {
  display: flex;
  background: white;
  border-radius: 10px;
  margin-bottom: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  overflow: hidden;
}

.news-item:hover {
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transform: translateY(-3px);
}

.news-item.active {
  border: 1px solid #3498db;
  box-shadow: 0 5px 15px rgba(52, 152, 219, 0.2);
}

.news-image {
  width: 200px;
  height: 160px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.news-item:hover .news-image img {
  transform: scale(1.05);
}

.news-date-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(44, 62, 80, 0.8);
  color: white;
  border-radius: 6px;
  padding: 5px 8px;
  text-align: center;
  min-width: 50px;
  backdrop-filter: blur(5px);
}

.news-date-badge .day {
  display: block;
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
}

.news-date-badge .month {
  display: block;
  font-size: 10px;
  margin-top: 2px;
}

.news-content {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.news-content h3 {
  margin: 0 0 12px 0;
  color: #2c3e50;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

.news-content p {
  margin: 0 0 15px 0;
  color: #7f8c8d;
  font-size: 14px;
  line-height: 1.6;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-meta {
  display: flex;
  gap: 15px;
  color: #95a5a6;
  font-size: 13px;
}

.news-meta span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.news-meta i {
  font-size: 14px;
}

.news-detail {
  background: white;
  border-radius: 10px;
  padding: 25px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  height: fit-content;
  position: sticky;
  top: 20px;
}

.detail-header {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e9ecef;
}

.detail-content h2 {
  margin: 0 0 15px 0;
  color: #2c3e50;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
}

.detail-meta {
  display: flex;
  gap: 15px;
  color: #7f8c8d;
  font-size: 14px;
}

.detail-meta span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.detail-image {
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
}

.detail-image img {
  width: 100%;
  display: block;
  border-radius: 8px;
}

.detail-text {
  margin-bottom: 25px;
  color: #34495e;
  line-height: 1.8;
  font-size: 15px;
}

.detail-footer {
  padding-top: 15px;
  border-top: 1px solid #e9ecef;
}

.detail-info p {
  margin: 8px 0;
  color: #7f8c8d;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-actions {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 15px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  color: #495057;
  transition: all 0.3s ease;
}

.action-btn:hover {
  background: #e9ecef;
  color: #3498db;
}

.no-selection {
  text-align: center;
  color: #95a5a6;
  padding: 60px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.no-selection i {
  font-size: 48px;
  margin-bottom: 15px;
  color: #bdc3c7;
}

@media (max-width: 992px) {
  .content {
    grid-template-columns: 1fr;
  }
  
  .news-detail {
    position: static;
  }
}

@media (max-width: 768px) {
  .header {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
  
  .header-actions {
    justify-content: space-between;
  }
  
  .search-input {
    flex: 1;
  }
  
  .news-item {
    flex-direction: column;
  }
  
  .news-image {
    width: 100%;
    height: 200px;
  }
  
  .news-content {
    padding: 15px;
  }
  
  .news-content h3 {
    font-size: 16px;
  }
}
</style>
